<template>
  <!-- 行为面板 -->
  <div>
    <template v-if="configObject && configObject.action">
      <template v-for="(event,index) in configObject.action">
        <div :key="index" class="mt10">
          <div class="sub-head">
            交互-{{index+1}}
            <q-icon
              name="delete"
              color="negative"
              class="icon-del"
              title="删除"
              @click.native="removeAction(index)"
            />
          </div>
          <table>
            <tr>
              <td width="50%">事件</td>
              <td width="50%">
                <q-select
                  emit-value
                  map-options
                  option-label="label"
                  v-model="event.type"
                  :option-disable="(item) => item === null ? true : item.cannotSelect"
                  :options="[{label:'点击',value:'click'},{label:'双击',value:'dblclick'},{label:'鼠标移入',value:'mouseenter',cannotSelect: true},{label:'鼠标双击',value:'mouseleave',cannotSelect: true}]"
                />
              </td>
            </tr>
            <tr>
              <td>动作</td>
              <td>
                <q-select
                  emit-value
                  map-options
                  option-label="label"
                  v-model="event.action"
                  :option-disable="(item) => item === null ? true : item.cannotSelect"
                  :options="[{label:'打开链接',value:'link',cannotSelect: true},{label:'赋值变量',value:'val',cannotSelect: true},{label:'展示隐藏',value:'visible'},{label:'调用服务',value:'service',cannotSelect: false}]"
                />
              </td>
            </tr>

            <tr v-if="event.action == 'visible'">
              <td>点击出现</td>
              <td>
                <q-select
                  filled
                  emit-value
                  multiple
                  use-chips
                  map-options
                  option-label="label"
                  v-model="event.showItems"
                  :options="generateTargetComponentOptions()"
                />
              </td>
            </tr>
            <tr v-if="event.action == 'visible'">
              <td>点击隐藏</td>
              <td>
                <q-select
                  filled
                  emit-value
                  multiple
                  use-chips
                  map-options
                  option-label="label"
                  v-model="event.hideItems"
                  :options="generateTargetComponentOptions()"
                />
              </td>
            </tr>
          </table>
        </div>
      </template>
      <div class="footer-btn">
        <q-btn label="添加" outline @click="addAction" />
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    configObject: {
      type: Object,
      default: null
    }
  },
  computed: {
    ...mapState({
      topoData: state => state.topoEditor.topoData
    })
  },
  methods: {
    //页面组件列表选项
    generateTargetComponentOptions () {
      var options = [];
      this.topoData.components.forEach(component => {
        if (this.configObject.identifier != component.identifier) {
          options.push({
            label: component.name || component.type,
            value: component.identifier
          });
        }
      });
      return options;
    },
    removeAction (index) {
      this.configObject.action.splice(index, 1);
    },
    addAction () {
      var action = {
        type: 'click',
        action: 'service',
        showItems: [],
        hideItems: []
      };
      this.configObject.action.push(action);
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-btn {
  width: 100%;
  padding: 10px 10px 10px 10px;
  button {
    width: 100%;
  }
}
.sub-head {
  padding: 5px;
  border-left: #ccc solid 1px;
  border-right: #ccc solid 1px;
  border-top: #ccc solid 1px;
  .icon-del {
    float: right;
    cursor: pointer;
  }
}
</style>